<template>
	<div class="layout-home">
		<div class="header flex-row-between flex-c">
			<div style="background-color: yellow;">
				<div>logo image</div>
			</div>
			<div class="flex-row-between" style="width: 10%;">
				<div>title main1</div>
				<div>title main2</div>
			</div>
			<div>time view</div>
		</div>
		<div class="content">
			<div class="one">
				<video :autoplay="true" :muted="true" :loop="true" class="backVideo">
					<source src="../video/back.mp4"/>
				</video>
			</div>
			<div class="flex-row two">
				<div class="btn-normal" @click="btnType = 'one'" :class="{ 'btn-sel': btnType == 'one' }">button1</div>
				<div class="btn-normal" @click="btnType = 'two'" :class="{ 'btn-sel': btnType == 'two' }">button2</div>
			</div>
		</div>
		<div class="bottom flex-row-between  flex-c">
			<div>left</div>
			<div class="flex-row flex-right" style="width: 20%; background-color: red;">
				<div>right-1111</div>
				<div>right-2222</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, reactive, onMounted } from 'vue'
import store from '@/store'
import { shallowRef } from '@vue/reactivity'
import { tr } from 'element-plus/es/locale'

const map = shallowRef(null)
const AMap = shallowRef(null)

const btnType = ref('one')

const videoSrc = "../video/back.mp4"
const isMuted = ref(true)

onMounted(() => { })
</script>

<style lang="scss" scoped>
@import '@/styles/index.scss';

.layout-home {
	height: 100ch;
	width: 100%;
	background-color: red;

	.header {
		height: 10%;
		background-color: lightblue;
	}

	.content {
		height: 80%;
		background-color: white;
		position: relative;

		.one {
			width: 100%;
			height: 100%;
			background-color: red;
			position: absolute;

			.backVideo {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				min-width: 100%;
				min-height: 100%;
				width: auto;
				height: auto;
			}
		}

		.two {
			width: 60%;
			height: 50%;
			background-color: black;
			position: absolute;

			.btn-normal {
				color: gray;
				font-weight: 600;
			}

			.btn-sel {
				color: #fff;
				font-weight: 600;
				text-shadow: 0px 5px 20px #fff;
			}
		}
	}

	.bottom {
		height: 10%;
		background-color: orange;
	}
}
</style>
